<template>
	<view class="height-100 bg-gray overflow-hidden">
		<view class="bg-white radius-xl padding margin">
			<view class="flex-direction-row">
				<image :src="imageUrl" mode="aspectFill" class="cu-photo flex-shrink"></image>
				<view class="flex-direction-column flex-sub margin-left">
					<view class="flex-direction-column flex-sub">
						<text class="text-lg color-black text-bold">{{goodsItem.productName}}</text>
						<!-- <text class="text-smd margin-top-xs color-black-b">规格：{{specs.code}}</text> -->
					</view>
					<view class="flex-direction-row align-center">
						<text class="text-xsm color-df">￥</text>
						<text class="text-xsl color-df text-bold">{{specs.price}}</text>
					</view>
				</view>
			</view>
			<view class="flex-direction-row justify-between padding-tb border-top margin-top">
				<text class="text-df text-bold color-black">数量</text>
				<uni-number-box v-model="productCount" :min="1" :max="99"></uni-number-box>
			</view>
			<text class="text-df padding-tb text-bold color-black">规格</text>
			<view class="flex-direction-row flex-wrap margin-top-sm">
				<block v-for='(item,index) in goodsItem.specsResList' :key='index'>
					<text class="text-df radius text-center padding-tb-xsm specs-button"
						:class="{'select-on':specs.id == item.id}" @click="selectSpecs(item)">{{item.code}}</text>
				</block>
			</view>
		</view>
		<view class="bg-white radius-xl padding margin">
			<view class="flex-direction-row justify-between padding-tb" @click="frequencyChange">
				<text class="text-df">用药频率</text>
				<view class="">
					<text
						class="text-smd color-black-b">{{usageFrequencyArray[usageFrequency] || '请选择'}}</text>
					<text class="text-smd iconfont color-black-q margin-left-xl-xs">&#xe61f;</text>
				</view>
			</view>
			<view class="flex-direction-row justify-between padding-tb align-center">
				<text class="text-df">单次用量</text>
				<input type="number" class="padding-lr padding-tb-xs bg-gray radius" style="width: 150rpx;"
					v-model="takeDosage" placeholder="请输入数量" placeholder-class="text-sm" />
				<view class="" @click="unitChange">
					<text
						class="text-smd color-black-b">{{unitArray[unit] || '请选择'}}</text>
					<text class="text-smd iconfont color-black-q margin-left-xl-xs">&#xe61f;</text>
				</view>
			</view>
			<view class="flex-direction-row justify-between padding-tb" @click="methodChange">
				<text class="text-df">用药方法</text>
				<view class="">
					<text
						class="text-smd color-black-b">{{medicationUsageArray[medicationUsage] || '请选择'}}</text>
					<text class="text-smd iconfont color-black-q margin-left-xl-xs">&#xe61f;</text>
				</view>
			</view>
		</view>
		<view style="160rpx"></view>
		<view class="position-fixed-bottom bg-white padding">
			<view class="padding-tb-sm margin bg-df radius-sl text-center" @click="submit()">
				<text class="text-lg color-white">完成</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		fields
	} from "@/common/fields.js"
	export default {
		onLoad(option) {
			if (option.goodsItem) {
				this.goodsItem = JSON.parse(option.goodsItem);
				console.log('this.goodsItem: ', this.goodsItem);
				this.specs = this.goodsItem.specsResList[0]
				this.imageUrl = this.specs?.imageUrlList[0]
			}
			// this.usageFrequencyTitle = fields.usageFrequency.map(item => {
			// 	return item.title
			// })
			// this.usageFrequency = fields.usageFrequency[0]
			// this.unitTitle = fields.unit.map(item => {
			// 	return item.title
			// })
			// this.unit = fields.unit[0]
			// this.medicationUsageTitle = fields.medicationUsage.map(item => {
			// 	return item.title
			// })
			// this.medicationUsage = fields.medicationUsage[0]
		},
		data() {
			return {
				goodsItem: {},
				specs: {},
				imageUrl: '',
				productCount: 1,
				usageFrequencyArray: fields.usageFrequency,
				unitArray: fields.unit,
				medicationUsageArray: fields.medicationUsage,
				usageFrequency: 0,
				unit: 0,
				medicationUsage: 0,
				takeDosage: 1
			}
		},
		methods: {
			selectSpecs(item) {
				this.specs = item
				this.imageUrl = item?.imageUrlList[0]
			},
			// 用药频率
			frequencyChange() {
				uni.showActionSheet({
					itemList: fields.usageFrequency,
					success: (res) => {
						// console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
						this.usageFrequency = res.tapIndex;
					},
					fail: function(res) {
						console.log(res.errMsg);
					}
				});
			},
			// 单次用量
			unitChange() {
				uni.showActionSheet({
					itemList: fields.unit,
					success: (res) => {
						this.unit = res.tapIndex;
					},
					fail: function(res) {
						console.log(res.errMsg);
					}
				});
			},
			// 用药频率
			methodChange() {
				uni.showActionSheet({
					itemList: fields.medicationUsage,
					success: (res) => {
						this.medicationUsage = res.tapIndex;
					},
					fail: function(res) {
						console.log(res.errMsg);
					}
				});
			},
			// 
			submit() {
				// 限制为空判断
				if (this.patientName === '') {
					uni.showToast({
						title: '就诊人不能为空',
						icon: 'none',
					});
					return;
				}
				// console.log({
				// 	productCode: this.goodsItem.productCode,
				// 	productName: this.goodsItem.productName,
				// 	productSpaceName: this.specs.name,
				// 	productSpecsId: this.specs.id,
				// 	usageFrequency: this.usageFrequency.key, //用药频率
				// 	medicationUsage: this.medicationUsage.key, //用药方法
				// 	unit: this.unit.key, //用量单位
				// 	takeDosage: this.takeDosage, //单次用量
				// 	count: this.productCount, //商品数量
				// });
				// return;
				uni.$emit('selectMethod', {
					productCode: this.goodsItem.productCode,
					productName: this.goodsItem.productName,
					productSpaceName: this.specs.name,
					productSpecsId: this.specs.id,
					usageFrequency: this.usageFrequency, //用药频率
					medicationUsage: this.medicationUsage, //用药方法
					unit: this.unit, //用量单位
					takeDosage: this.takeDosage, //单次用量
					count: this.productCount, //商品数量
					// usageFrequencyString: this.frequencyArr[this.usageFrequencyIndex], //用药频率
					// medicationUsageString: this.methodArr[this.methodIndex], //用药方法
					// unitString: this.unitArr[this.unitIndex], //用量单位
				})
				uni.navigateBack({
					delta: 3
				});
			}
		}
	}
</script>

<style scoped>
	.specs-button {
		background: rgb(248, 248, 248);
		border: 1rpx solid #fff;
		width: 210rpx;
		margin-right: 18rpx;
		margin-top: 18rpx;
		color: #888;
	}

	.select-on {
		background-color: rgba(219, 64, 44, 0.06);
		border: 1rpx solid rgba(217, 55, 34);
		color: #d93722;
	}
</style>